<template>
  <div class="app-container">

   <div class="filter-container">
    
      <el-select v-model="selectValue"  placeholder="请选择" class='inp_search'>
          <el-option
          v-for="item in optionsData"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
      </el-select>

      <!-- <el-select v-model="selectRoles"  placeholder="请选择" class='inp_search'>
          <el-option
          v-for="item in optionsRoles"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
      </el-select> -->
      
      <el-input
          placeholder="输入查询"
          v-model="input_conten"
          clearable class='inp_search'>
      </el-input>
      
      
      <el-button  class="filter-item" type="primary" icon="el-icon-search"  @click="searchList">
        搜索
      </el-button>
      <!-- <el-button v-if="role == '4'"  class="filter-item" type="success" icon="el-icon-plus" @click="addList('add')">
        添加
      </el-button> -->
      <el-button  class="filter-item" type="primary" icon="el-icon-refresh"  @click="resList">
        重置
      </el-button>
    </div>
     
     <!-- 表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
     <el-table-column label="ID" width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.recordId === null">--</span>
           <span v-else> {{scope.row.recordId}} </span>
        </template>
      </el-table-column>

       <el-table-column label="日期" width="200" align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.time === null">--</span>
           <span v-else> {{scope.row.time}} </span>
        </template>
      </el-table-column>

      <el-table-column label="工具名称" min-width="200" align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.toolName === null">--</span>
           <span v-else> {{scope.row.toolName}} </span>
        </template>
      </el-table-column>

      <el-table-column label="工具ID" min-width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.toolId === null">--</span>
           <span v-else> {{scope.row.toolId}} </span>
        </template>
      </el-table-column>

      <el-table-column label="单据号" min-width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.pillId === null">--</span>
           <span v-else> {{scope.row.pillId}} </span>
        </template>
      </el-table-column>

      <el-table-column label="员工手机号" min-width="200" align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.userPhone === null">--</span>
           <span v-else> {{scope.row.userPhone}} </span>
        </template>
      </el-table-column>

      <el-table-column label="员工单据"  min-width="150" align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.staffImg === ''">--</span>
            <viewer v-else>
              <img :src="scope.row.staffImg " class='carImgs'>
            </viewer>
        </template>
      </el-table-column>

     <el-table-column label="仓管单据"  min-width="150" align="center">
        <template scope="scope">
            <span v-if="scope.row.adminImg === ''">--</span>
            <viewer v-else>
              <img :src="scope.row.adminImg " class='carImgs'>
            </viewer>
        </template>
      </el-table-column>


      <el-table-column label="取用/归还" min-width="200" align="center">
        <template slot-scope="scope">
            <!-- type类型（1出租 0归还） -->
           <span v-if="scope.row.type === null">--</span>
           <span v-else-if="scope.row.type == '1'">取用</span>
           <span v-else>归还</span>
        </template>
      </el-table-column>

       <el-table-column label="数量" min-width="200" align="center">
        <template slot-scope="scope">
           <span v-if="scope.row.quantity === null">--</span>
           <span v-else> {{scope.row.quantity}} </span>
        </template>
      </el-table-column>

      <el-table-column v-if="role == '4'"  fixed='right' label="操作" width="200" align="center">
         <template scope="scope">
				    <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="delStock(scope.$index, scope.row)">删除</el-button>
				</template>
         
      </el-table-column>
    </el-table>
   <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"  @pagination="fetchData"/>

   <!-- 添加 -->
   <div class='formPosition' v-if='dialogFormVisible'>
   <div class='titleForm'>
          <div class='left_titleForm'>{{titleName}}</div>
          <span class="icon iconfont right_titleForm" @click="dialogFormVisible = false">&#xe72d;</span>
   </div>
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm " :visible.sync="dialogFormVisible">
         <el-row :gutter="20">
                <el-col :span="12">
                      <el-form-item  label="员工单据" >
                        <viewer>
                          <img class='carImgs1' :src='this.staffImg'/>
                        </viewer>
                      </el-form-item>
                </el-col>

                <el-col :span="12">
                      <el-form-item  label="仓库单据" >
                        <viewer>
                          <img class='carImgs1' :src='this.adminImg'/>
                        </viewer>
                      </el-form-item>
                </el-col>
           </el-row>

           <el-row :gutter="20">
                <el-col :span="12">
                      <el-form-item label="时间" >
                          <el-date-picker 
                                v-model="select_time"
                                type="date"
                                placeholder="选择日期" class='select_roles'>
                          </el-date-picker>
                      </el-form-item>
                </el-col>

                <el-col :span="12">
                      <el-form-item v-if=" titleName== '修改'" label="ID">
                        <el-input v-model="ruleForm.recordId" readonly></el-input>
                      </el-form-item>
                </el-col>
           </el-row>

           <el-row :gutter="20">
                <el-col :span="12">
                     <el-form-item label="工具名称" >
                        <el-select  v-model='selestTool'  placeholder="请选择" class='select_roles' @change="changTool(selestTool)">
                              <el-option
                                v-for="item in optionsTool"
                                :key="item.toolId"
                                :label="item.toolName"
                                :value="item.toolId">
                              </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                     <el-form-item  label="工具ID" >
                          <el-input v-model="selestTool" readonly></el-input>
                      </el-form-item> 
                </el-col>
           </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="员工手机号" prop="userPhone">
                          <el-input v-model="ruleForm.userPhone"></el-input>
                      </el-form-item>
                </el-col>

                <el-col :span="12">
                      <el-form-item  label="单据号" >
                          <el-input v-model="this.ruleForm.pillId" readonly></el-input>
                      </el-form-item>
                </el-col>
           </el-row>

           <el-row :gutter="20">
                <el-col :span="12">
                      <el-form-item label="数量" prop="quantity">
                          <el-input  v-model.number="ruleForm.quantity"></el-input>
                      </el-form-item>
                </el-col>

                <el-col :span="12">
                     <el-form-item label="取用/归还" >
                        <el-select  v-model='selestStatue'  placeholder="请选择" class='select_roles' @change="changStatue(selestStatue)">
                              <el-option
                                v-for="item in optionsStatue"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                              </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
           </el-row>

          <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
     </el-form>
    </div>
  </div>
   
   
  
</template>

<script>
import { getBillManage ,modifyBillManage ,searchByPillId} from '@/api/billManages'
import { getStockList , searchByPhone ,searchByStockName ,modifyStock ,addStock ,delStockList ,getTools} from '@/api/stockRecode'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      role:'',
      input_conten:'',
      select_time:'',
      optionsData: [{
          value: 'userPhone',
          label: '员工手机号'
        }, {
          value: 'toolName',
          label: '工具名称'
        },{
          value: 'pillId',
          label: '单据号'
        }],
      optionsRoles:[{
          value: 'commonUser',
          label: '普通用户'
        },{
          value: 'store',
          label: '门店'
        },{
          value: 'staff',
          label: '员工'
        },
        {
          value: 'headquarters',
          label: '总部'
        }],
      optionsStatue:[{
          value: '1',
          label: '取用'
      },{
          value: '0',
          label: '归还'
      }],
      selestStatue:'',
      selectRoles:'',
      selectValue: '',
      titleName:'',
      addSelectRoles:'',
      list: null,
      listLoading: true,
      total: 0,
      selestTool:'',
      optionsTool:[],
      optionsToolText:'',
      staffImg:'',
      adminImg:'',
      listQuery:{
          page: 1,
          limit: 10,
      },
      dialogFormVisible:false,
      ruleForm: {
          recordId: '',
          toolId:'',
          toolName:'',
          userPhone:'',
          type:'', 
          quantity:'',
          pillId:'',
        },
        cleanForm:{
          recordId: '',
          toolId:'',
          toolName:'',
          userPhone:'',
          type:'', 
          quantity:'',
          pillId:'',
        },
        rules: {
          toolName: [
            { required: true, message: '请输入工具名称', trigger: 'blur' },
          ],
          userPhone: [
            { required: true, message: '请输入员工手机号', trigger: 'blur' },
            {
            pattern: /^1[0-9]{10}$/,
            message: '员工手机号格式不对',
            trigger: 'blur'
          },
          ],
          type: [
            { type: 'array', required: true, message: '请选择取用/归还', trigger: 'change' }
          ],
          quantity: [
            {type: 'number',required: true, message: '请输入数量', trigger: 'change' }
          ]
        }
    }
  },
  created() {
    const userInfo = localStorage.getItem('userInfo');
    this.role = JSON.parse(userInfo).role;
    this.fetchData()
    this.getToolData()
    this.selectValue = this.optionsData[0].label;
    this.selectValue = "userPhone";
    this.selectRoles = this.optionsRoles[0].label;
    this.addSelectRoles = this.optionsRoles[0].label;
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const paramsData = {curPage:this.listQuery.page,pageSize:this.listQuery.limit}
      getStockList(paramsData).then(res => {
        this.total = res.data.countNum;
        this.list = res.data.obj;
         this.listLoading = false
      })
    },
   getToolData(){
     const paramsData = {}
        getTools(paramsData).then(res => {
        this.optionsTool = res.data;
        
      })
   },
   submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              if(this.titleName === "添加"){
                this.handleAdd(formName)
              }else{
                this.handleModify(formName)
              }
              this.listLoading = false;
              this.resetForm(formName) 
          } else {
            console.log('提交失败!');
            return false;
          }
        });
      },
      handleModify(formName){//修改
             const paramsData = {
                  recordId:this.ruleForm.recordId,
                  toolId:this.selestTool,
                  toolName:this.optionsToolText,
                  userPhone:this.ruleForm.userPhone,
                  type: this.selestStatue,
                  quantity:this.ruleForm.quantity
                  }
                modifyStock(paramsData).then(res => {
                  if(res.code == '200'){
                        this.$notify({
                        message: '修改成功',
                        type: 'success',
                        duration: 2000
                    })
                  }else{
                    this.$notify({
                        message: '修改失败',
                        type: 'error',
                        duration: 2000
                    })
                  }
                  this.fetchData()//获取列表
                  
              })
      },
      resetForm(formName) {
          this.ruleForm = this.cleanForm;
          this.$refs.ruleForm.resetFields();
          this.dialogFormVisible = false; 
      },
      addList(operationName){
          this.dialogFormVisible = true;   
          this.ruleForm = this.cleanForm;
          this.selestStatue = ''; 
          this.select_time = ''; 
          this.selestTool = '';
          this.optionsToolText = '';
          this.titleName = '添加'
          
      },
      handleEdit(index, row ) {//修改
          this.titleName = '修改'
          this.dialogFormVisible = true;
          var obj = {};
          obj = this.optionsStatue.find(item =>{
              return item.value === row.type
          });
          this.selestStatue = obj.value;
          this.select_time = row.time;

          var obj1 = {};
          obj1 = this.optionsTool.find(item =>{
              return item.toolId === row.toolId
          });
          this.selestTool = obj1.toolId;
          this.optionsToolText = obj1.toolName;
          this.staffImg = row.staffImg;
          this.adminImg = row.adminImg;
          this.ruleForm = Object.assign({}, row);
      },
      delStock(index, row ) {//删除
          const paramsData = {recordId:row.recordId}
          delStockList(paramsData).then(res => {
              if(res.code == '200'){
                  if (this.total % this.listQuery.limit === 1) {    
                      const lastPage = (this.total + this.listQuery.limit - 1) / this.listQuery.limit  
                      if (this.listQuery.page === lastPage) { 
                        this.listQuery.page = this.listQuery.page - 1 
                      }
                    }
                    this.$notify({
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })
              }else{
                this.$notify({
                    message: '删除失败',
                    type: 'error',
                    duration: 2000
                })
              }
              this.ruleForm = this.cleanForm;
              this.fetchData()//获取列表
        }) 
      },
      changStatue(data){
           this.selestStatue = data;
      },
      changTool(data){
             this.selestTool = data;
              var obj1 = {};
              obj1 = this.optionsTool.find(item =>{
                  return item.toolId === this.selestTool
              });
              this.optionsToolText = obj1.toolName;
      },
      resList(){
          const userInfo = localStorage.getItem('userInfo');
          this.role = JSON.parse(userInfo).role;
          this.fetchData()
          this.getToolData()
          this.selectValue = this.optionsData[0].label;
          this.selectValue = "userPhone";
          this.selectRoles = this.optionsRoles[0].label;
          this.addSelectRoles = this.optionsRoles[0].label;
      },
      searchList(){//搜索
         if(this.input_conten){
            if(this.selectValue == 'userPhone'){//员工手机号
                const paramsData = {phone:this.input_conten,curPage:this.listQuery.page,pageSize:this.listQuery.limit}
                 searchByPhone(paramsData).then(res => {
                    this.list = res.data.obj;
                    this.total = res.data.countNum;
                })
            }else if( this.selectValue == "pillId"){//根据单据号
               const paramsData = {pillId:this.input_conten,curPage:this.listQuery.page,pageSize:this.listQuery.limit}
                  searchByPillId(paramsData).then(res => {
                      this.list = res.data.obj
                  }) 
            }else{//工具名称
                 const paramsData = {toolName:this.input_conten,curPage:this.listQuery.page,pageSize:this.listQuery.limit}
                 searchByStockName(paramsData).then(res => {
                    this.list = res.data.obj;
                    this.total = res.data.countNum;
                })
            }
         }else{
            this.fetchData();
            return false;
         }

      }
    }
  
 }
</script>
<style lang="scss">
 .filter-container{
   margin-bottom:20px;
 }
 .el-date-range-picker{
   margin-left:220px;
 }
 .inp_search{ 
   width:20%;
   margin-right:1%;        
 }
 .formPosition{
    width:70%;
    height:auto;
    background:#fff;
    position:absolute;
    left:15%;
    top:5%;
    z-index:999;
    padding:30px;
    box-shadow: 0px 0px 5px 5px #eee;
    border-radius: 5px;
 }
 .demo-ruleForm{
      width:90%;     
 }
 .titleForm{
     width:100%;
     height:30px;
     line-height:30px;
     margin-bottom:20px;
     font-size:1.1em;
     font-weight: 500;
 }
 .left_titleForm{
    float:left;
 }
 .right_titleForm{
    display:block;
    float:right;
 }
 .select_roles{
    width:100%;
 }
 .carImgs{
   width:45px;
   height:45px;
   border-radius:5px;
   margin:0 3px;
 }
 .carImgs1{
   width:60px;
   height:60px;
   border-radius:5px;
   margin:0 3px;
   border:solid 1px #efefef;
 }
</style>
